<template>
  <div class="no-border-tabs">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="今日" name="first">
        <!--begin-->
        <Today />
        <!--end-->
      </el-tab-pane>
      <el-tab-pane label="本周" name="second">
        <Week />
      </el-tab-pane>
      <el-tab-pane label="本月" name="third">
        <Month />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import Today from "./Today.vue";
import Week from "./Week.vue";
import Month from "./Month.vue";
import { ref } from "vue";
import type { TabsPaneContext } from "element-plus";
const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style scoped>
:deep(.el-tabs__active-bar) {
  background-color: transparent !important;
}
/* 修改标签页激活状态的颜色 */
/* .el-tabs__item.is-active {
  color: #409EFF;
} */

/* 修改标签页下边框的颜色 */
/* .el-tabs__header::after {
  background-color: #e4e7ed;
} */
.no-border-tabs /deep/ .el-tabs__nav-wrap::after {
  position: static !important;
}
.no-border-tabs::v-deep .el-tabs__nav{
  margin-left: 12px!important;
}
</style>
